<template>
<form class="form-goods">
    <my-input
        title='商品名称'
        name='goods-name'
        v-model='goodsinfo.goods_name'
    ></my-input>
    <div class="select-goods-cate">
        <span class="select-title">商品分类</span>
        <my-cascade-selector 
            :list='calteList'
            @cascade-event="handleCascadeEvent"
        ></my-cascade-selector>
    </div>
    <my-input
        type='number'
        title='商品价格'
        name='goods-price'
        :min='0'
        v-model='goodsinfo.goods_price'
    ></my-input>
    <my-input
        type='number'
        title='商品重量'
        name='goods-weight'
        :min='0'
        v-model='goodsinfo.goods_weight'
    ></my-input>
    <my-input
        type='number'
        title='商品数量'
        name='goods-count'
        :min='0'
        v-model='goodsinfo.goods_number'
    ></my-input>
</form>
</template>

<script>
import { goodsCateList } from '../../config/data'
export default {
    name: 'goodsBaseInfo',
    props: ['goodsinfo'],
    data() {
        return {
            calteList: [],
            cateIdArr: []
        }
    },
    created() {
        this.getGoodsCateList()
    },
    methods: {
        handleCascadeEvent(obj) {
            this.cateIdArr = obj.selectedCid
            if(this.cateIdArr.length === 3) {
                this.$emit('update:goodsinfo', {
                    cateId: this.cateId,
                    cateLenBool: true,
                    goods_cat: this.cateIdArr
                })
            } else {
                this.$emit('update:goodsinfo', {
                    cateLenBool: false
                })
            }
        },
        async getGoodsCateList() {
            let result = await goodsCateList({ pages: 0, counts: 0})
            this.calteList = result.data.cateList
        }   
    },
    computed: {
        cateId() {
            if(this.cateIdArr.length === 3) {
                return this.cateIdArr[2];
            }
            return '';
        }
    }
}
</script>

<style scoped>
.form-goods {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.select-goods-cate {
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
    transform: translateX(-10px);
}
.select-title {
    min-width: 96px;
    height: 34px;
    line-height: 34px;
    text-align-last: justify;
    padding-right: 16px;
    white-space: nowrap;
}
</style>